<template>
  <back-btn></back-btn>
  <div id="app">
    <div>名称：<input type="text" v-model="name" /></div>
    <div>年龄：<input type="text" v-model="age" /></div>
    <div>介绍：<input type="text" v-model="info" readonly /></div>
    <div>出生：<input type="text" v-model.number="startYear" /></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from "vue";

export default defineComponent({
  setup() {
    // 名称
    const name = ref("温情");
    // 年龄
    const age = ref(0);
    // 介绍
    const info = computed(() => {
      return `名称为${name.value}; 现在${age.value}岁`;
    });
    // 出生年份
    const startYear = computed({
      get() {
        return startYear.value || new Date().getFullYear();
      },
      set(val: number) {
        console.log("触发startYear的set函数", val);
      },
    });

    return { name, startYear, age, info };
  },
});
</script>

<style scoped>
#app {
  height: 300px;
  display: flex;
  flex-direction: column;
}

input {
  margin: 10px 0;
  width: 200px;
}
</style>
